<!--
 * @Author: [kangjie]
 * @Date: 2022-09-06 21:36:01
 * @LastEditors: [kangjie]
 * @LastEditTime: 2022-09-07 14:20:20
 * @Description: 
-->
<template>
  <div ref="container" style="height: 95%"></div>
</template>
<script>
// 引入图图表构造函数
import { Bar } from '@antv/g2plot';
export default {
  data() {
    return {};
  },
  methods: {
    // 封装图表方法
    loadCharts() {
      const data = [
        { year: 'Tscales', value: 38 },
        { year: 'Rscales', value: 52 },
        { year: 'Lscales', value: 61 },
        { year: 'Nscales', value: 145 },
        { year: 'Kscales', value: 48 },
      ];

      const bar = new Bar(this.$refs['container'], {
        data,
        xField: 'value',
        yField: 'year',
        seriesField: 'year',
        legend: {
          position: 'top-left',
        },
      });

      bar.render();
    },
  },
  // 生命周期 钩子函数 dom挂载到页面
  mounted() {
    this.loadCharts()
  }
};
</script>
<style lang="scss">

</style>
